<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="__STATIC__/logo.ico" />
    <link href="__STATIC__/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="__STATIC__/assets/arr_css/bootstrap.min.css">
    <link rel="stylesheet" href="__STATIC__/assets/index_css/head.css">
    <link rel="stylesheet" href="__STATIC__/assets/index_css/footer.css">
    <link href="__STATIC__/layer/layui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="__STATIC__/assets/generate/generate.css">
    <link href="__STATIC__/layer/layui.css" rel="stylesheet" type="text/css" />

    <title>生成订单</title>
    <style type="text/css">
        #sele input{
            height:50px;
        }

    </style>
</head>

<body>
    {include file="public/top"}

    <div class="generate_title">
        <p style="font-size:20px;font-weight:400;margin-top:10px;">商品信息</p>
        <!-- <div class="add_del layui-elem-field site-demo-button">
            <button class="layui-btn layui-btn-normal pull-right " id="add">添加</button>
        </div> -->
    </div>
    <form class="layui-form" id="formdata" action="{:url('Index/er_code')}" enctype="multipart/form-data" method="post">
        <div class="commodity">
            <div class="commodity_neir">
                <div style="height: 700px;overflow: auto;">
                    <table id="" class="comment_table layui-inline">
                        <tr>
                            <!-- <th style="width: 59px;">序号</th> -->
                            <th style="width: 416px;">商品名称</th>
                            <th style="width: 61px;">单位</th>
                            <th style="width: 61px;">数量</th>
                            <th style="width: 300px">品牌名称</th>
                            <th style="width: 113px;">单价</th>
                            <th style="width: 210px;">备注</th>
                            <!-- <th style="width: 59px;">删除</th> -->
                        </tr>
                        <tr class="layui-form-item">
                            <td class="layui-input-inline" style="width: 416px;">
                                <input class="comment_text layui-input bitian" id="goods_name-1" name="data[0][goods_name]" lay-verify="required" autocomplete="off"
                                    placeholder="" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input bitian" name="data[0][com]" lay-verify="required" autocomplete="off" placeholder=""
                                    type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input num bitian" id="num-1" name="data[0][num]" lay-verify="required" autocomplete="off"
                                    placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 300px">
                                <div id="sele">
                                  <select name="data[0][brand_name]" lay-filter="aihao" style="height:50px;">
                                    <option value="0">请选择</option>
                                    {volist name="brandArr" id="v"}
                                    <option value="{$v.brand_name}">{$v.brand_name}</option>
                                    {/volist}
                                  </select>
                                </div>
                            </td>
                            <td class="layui-input-inline" style="width: 113px;">
                                <input class="comment_text layui-input num total bitian" id="unit-1" name="data[0][unit]" lay-verify="required" autocomplete="off"
                                    placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 210px;">
                                <input class="comment_text layui-input " name="data[0][content]" autocomplete="off" type="text">
                            </td>

                        </tr>
                        <tr class="layui-form-item">


                            <td class="layui-input-inline" style="width: 416px;">
                                <input class="comment_text layui-input" id="goods_name-2" name="data[1][goods_name]" autocomplete="off" placeholder="" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input" name="data[1][com]" autocomplete="off" placeholder="" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input num" id="num-2" name="data[1][num]" autocomplete="off" placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 300px">
                                <!-- <input class="comment_text layui-input" value="" id="price" name="data[1][brand_name]" lay-verify="required" autocomplete="off"
                                    type="text"> -->
                                <div id="sele">
                                  <select name="data[1][brand_name]" lay-filter="aihao" style="height:50px;">
                                    <option value="0">请选择</option>
                                    {volist name="brandArr" id="v"}
                                    <option value="{$v.brand_name}">{$v.brand_name}</option>
                                    {/volist}
                                  </select>
                                </div>
                            </td>
                            <td class="layui-input-inline" style="width: 113px;">
                                <input class="comment_text layui-input total num" id="unit-2" name="data[1][unit]" autocomplete="off" placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 210px;">
                                <input class="comment_text layui-input" name="data[1][content]" autocomplete="off" type="text">
                            </td>


                        </tr>
                        <tr class="layui-form-item">

                            <td class="layui-input-inline" style="width: 416px;">
                                <input class="comment_text layui-input" id="goods_name-3" name="data[2][goods_name]" autocomplete="off" placeholder="" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input" name="data[2][com]" autocomplete="off" placeholder="" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input num" id="num-3" name="data[2][num]" autocomplete="off" placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 300px">
                                <!-- <input class="comment_text layui-input" value="" id="price" name="data[2][brand_name]" lay-verify="required" autocomplete="off"
                                    type="text"> -->
                                <div id="sele">
                                  <select name="data[2][brand_name]" lay-filter="aihao" style="height:50px;">
                                    <option value="0">请选择</option>
                                    {volist name="brandArr" id="v"}
                                    <option value="{$v.brand_name}">{$v.brand_name}</option>
                                    {/volist}
                                  </select>
                                </div>
                            </td>
                            <td class="layui-input-inline" style="width: 113px;">
                                <input class="comment_text layui-input total num" id="unit-3" name="data[2][unit]" autocomplete="off" placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 210px;">
                                <input class="comment_text layui-input" name="data[2][content]" autocomplete="off" type="text">
                            </td>

                        </tr>
                        <tr class="layui-form-item">


                            <td class="layui-input-inline" style="width: 416px;">
                                <input class="comment_text layui-input" id="goods_name-4" name="data[3][goods_name]" autocomplete="off" placeholder="" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input" name="data[3][com]" autocomplete="off" placeholder="" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 61px;">
                                <input class="comment_text layui-input num" id="num-4" name="data[3][num]" autocomplete="off" placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 300px">
                               <!--  <input class="comment_text layui-input" value="" id="price" name="data[3][brand_name]" lay-verify="required" autocomplete="off"
                                    type="text"> -->
                                <div id="sele">
                                  <select name="data[3][brand_name]" lay-filter="aihao" style="height:50px;">
                                    <option value="0">请选择</option>
                                    {volist name="brandArr" id="v"}
                                    <option value="{$v.brand_name}">{$v.brand_name}</option>
                                    {/volist}
                                  </select>
                                </div>
                            </td>
                            <td class="layui-input-inline" style="width: 113px;">
                                <input class="comment_text layui-input total num" id="unit-4" name="data[3][unit]" autocomplete="off" placeholder="0" type="text">
                            </td>
                            <td class="layui-input-inline" style="width: 210px;">
                                <input class="comment_text layui-input" name="data[3][content]" autocomplete="off" type="text">
                            </td>

                        </tr>
                    </table>
                </div>
            </div>

        </div>
        <div class="business">
            <h2>商家信息</h2>
            <div class="business_name">
                <span>卖场名称</span>
                <!-- <span>品牌名称</span> -->
            </div>
            <div class="layui-inline" style="padding: 0 15px;">

                <div class="layui-input-inline" style="width: 570px;height: 50px;margin-right:10px; ">
                    <input class="comment_text layui-input" name="selling_name" autocomplete="off" placeholder="" type="text" style="pointer-events: none;"
                        value="{$m_name}">

                </div>

            </div>
            <div class="business_tel">
                <span>用户登入手机号
                    <b style="color: #e83f44;">*</b>
                </span>
                <span>供应商联系人
                    <b style="color: #e83f44;">*</b>
                </span>
                <span>供应商电话号码
                    <b style="color: #e83f44;">*</b>
                </span>
                <span>订单专员/电话</span>

            </div>
            <div class="layui-form-item business_xinxi">
                <div class="layui-input-inline">
                    <input type="text" id="memberphone" name="member_phone" lay-verify="required|phone" placeholder="请填写用户登入手机号(必填)..." autocomplete="off"
                        class="layui-input num bitian">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="selling_user" lay-verify="required" placeholder="" autocomplete="off" class="layui-input bitian">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="selling_phone" lay-verify="required|phone" placeholder="" autocomplete="off" class="num bitian layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="d_phone" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>

            </div>
        </div>
        <div class="give">
            <h2>配送信息</h2>
            <div class="give_name">
                <span>收货人
                    <b style="color: #e83f44;">*</b>
                </span>
                <span>电话号码
                    <b style="color: #e83f44;">*</b>
                </span>
                <span>订货日期
                    <b style="color: #e83f44;">*</b>
                </span>
                <span>交货日期
                    <b style="color: #e83f44;">*</b>
                </span>
            </div>
            <div class="layui-form-item give_xinxi">
                <div class="layui-input-inline">
                    <input type="text" id="username" name="user_name" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" id="userphone" name="user_phone" lay-verify="required|phone" placeholder="" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="time" id="date" lay-verify="date" placeholder="选择日期" autocomplete="off" class="bitian layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="j_time" id="date1" lay-verify="date" placeholder="选择日期" autocomplete="off" class="bitian layui-input">
                </div>
            </div>
            <div class="give_name">
                <span>收货地址
                    <b style="color: #e83f44;">*</b>
                </span>
            </div>
            <div class="layui-form-item" style="width: 570px;">
                <div class="bitian layui-input-block" style="margin-left: 15px;">
                    <input type="text" id="useraddress" name="user_address" lay-verify="required" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item submission">
            <div>
                <p>运费
                    <span class="pull-right">￥
                        <span>
                            <input type="text" name="freight" style="border: 0px;" placeholder="请输入运费...">
                        </span>
                    </span>
                </p>
                <p>合计
                    <span class="pull-right" style="color: #e83f44">￥
                        <span id="val">
                            <input type="text" name="total" id="total" value="0" style="border: 0px;background-color:#fff;color:red;" disabled="disabled">
                        </span>
                    </span>
                </p>
            </div>
            <div class="layui-input-block " style="margin-left: 0;">

            </div>
        </div>
        <div class="btn btn-primary btn-lg" id="erweima" data-target="#myModal" onclick="code1()" style="margin:20px 40%;width:200px;height:50px;line-height:35px;font-size:18px;">生成二维码</div>
    </form>

    <!-- 底部 -->
    {include file="public/footer"}
</body>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
                <!-- <h4 class="modal-title" id="myModalLabel">Modal title</h4> -->
            </div>
            <div class="modal-body">
                <div id="qrcode" style="text-align:center;"></div>
            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
                <button type="button" class="btn btn-primary" onclick="esc()">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="__STATIC__/assets/arr_css/jquery-3.3.1.js"></script>
<script type="text/javascript" src="__STATIC__/assets/arr_css/jquery.SuperSlide2.js"></script>
<script src="__STATIC__/assets/arr_css/bootstrap.min.js"></script>
<script src="__STATIC__/assets/arr_css/head.js"></script>
<script src="__STATIC__/assets/account/layui/layui.js"></script>
<script src="__STATIC__/assets/generate/generate.js"></script>
<script src="__STATIC__/jeromeetienne-jquery/jquery.qrcode.min.js"></script>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#date',
            min: 0,
            // max: 7 //7天后
        });
        laydate.render({
            elem: '#date1',
            min: 0,
            // max: 7 //7天后
        });

    });
    layui.use('form', function () {
        var form = layui.form;
        form.on('submit(code)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                // title: '最终的提交信息'
            })
            return false;
        });
    })

    $(".num").keyup(function () {
        $(this).val($(this).val().replace(/[^0-9\.\-]/g, ''));
    }).bind("paste", function () {
        $(this).val($(this).val().replace(/[^0-9\.\-]/g, ''));
    })

    function esc() {
        history.go(0);
    }

    function code1() {
        // $('#qrcode').qrcode(data);
        var memberphone = $('#memberphone').val();
        var username = $('#username').val();
        var userphone = $('#userphone').val();
        var bitian = $(".bitian").val();
        // console.log(memberphone);
        if (memberphone == '') {
            layer.confirm('用户登入手机号必须填写！', {
                btn: ['确定'] //按钮
            });
        } else if (username == '') {
            layer.confirm('收货人姓名必须填写！', {
                btn: ['确定'] //按钮
            });
        } else if (userphone == '') {
            layer.confirm('收货人手机号必须填写！', {
                btn: ['确定'] //按钮
            });
        } else if (bitian == "") {

            layer.confirm('商品信息与带 * 号位置为必填项，请检查后重新填写！', {
                btn: ['确定'] //按钮
            });

        } else {
            // console.log('111');
            // data-toggle="modal"
            $("#erweima").attr("data-toggle", "modal")

            $.ajax({
                type: "POST",
                url: "{:url('Index/er_code')}",
                data: $('#formdata').serialize(), // 要提交的表单 
                success: function (data) {
                    // console.log(data);
                    if (data) {
                        // console.log(data);
                        $('#qrcode').qrcode(data);
                    } else {
                        layer.confirm('生成二维码失败，请重新填写！', {
                            btn: ['确定'] //按钮
                        });
                    }
                }
            });
        }


    }

    $('#unit-1').blur(function () {
        var goods_name = $('#goods_name-1').val();
        if (goods_name != '') {
            var unit1 = $('#unit-1').val() * $('#num-1').val();
            var unit2 = $('#unit-2').val() * $('#num-2').val();
            var unit3 = $('#unit-3').val() * $('#num-3').val();
            var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit1 + unit2 + unit3 + unit4;
            var total = count.toFixed(2);
            // console.log(unit1);
            $("#total").val(total);
        } else {
            var unit2 = $('#unit-2').val() * $('#num-2').val();
            var unit3 = $('#unit-3').val() * $('#num-3').val();
            var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit2 + unit3 + unit4;
            var total = count.toFixed(2);
            // console.log(unit1);
            $("#total").val(total);
        }


    });
    $('#unit-2').blur(function () {
        var goods_name = $('#goods_name-2').val();
        // $("#val").val("");
        if (goods_name != '') {

            var unit1 = $('#unit-1').val() * $('#num-1').val();
            // console.log(unit1);
            var unit2 = $('#unit-2').val() * $('#num-2').val();
            // console.log(unit2);
            var unit3 = $('#unit-3').val() * $('#num-3').val();
            var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit1 + unit2 + unit3 + unit4;

            // console.log(count);
            var total = count.toFixed(2);

            $("#total").val(total);
        } else {
            var unit1 = $('#unit-1').val() * $('#num-1').val();
            // var unit2 = $('#unit-2').val() * $('#num-2').val();
            var unit3 = $('#unit-3').val() * $('#num-3').val();
            var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit1 + unit3 + unit4;
            var total = count.toFixed(2);
            // console.log(unit1);
            $("#total").val(total);
        }


    });

    $('#unit-3').blur(function () {
        var goods_name = $('#goods_name-3').val();
        if (goods_name != '') {
            var unit1 = $('#unit-1').val() * $('#num-1').val();
            var unit2 = $('#unit-2').val() * $('#num-2').val();
            var unit3 = $('#unit-3').val() * $('#num-3').val();
            var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit1 + unit2 + unit3 + unit4;
            var total = count.toFixed(2);
            // console.log(unit1);
            $("#total").val(total);
        } else {
            var unit1 = $('#unit-1').val() * $('#num-1').val();
            var unit2 = $('#unit-2').val() * $('#num-2').val();
            // var unit3 = $('#unit-3').val() * $('#num-3').val();
            var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit1 + unit2 + unit4;
            var total = count.toFixed(2);
            // console.log(unit1);
            $("#total").val(total);
        }


    });

    $('#unit-4').blur(function () {
        var goods_name = $('#goods_name-4').val();
        if (goods_name != '') {
            var unit1 = $('#unit-1').val() * $('#num-1').val();
            var unit2 = $('#unit-2').val() * $('#num-2').val();
            var unit3 = $('#unit-3').val() * $('#num-3').val();
            var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit1 + unit2 + unit3 + unit4;
            var total = count.toFixed(2);
            // console.log(unit1);
            $("#total").val(total);
        } else {
            var unit1 = $('#unit-1').val() * $('#num-1').val();
            var unit2 = $('#unit-2').val() * $('#num-2').val();
            var unit3 = $('#unit-3').val() * $('#num-3').val();
            // var unit4 = $('#unit-4').val() * $('#num-4').val();
            var count = unit1 + unit2 + unit3;
            var total = count.toFixed(2);
            // console.log(unit1);
            $("#total").val(total);
        }


    });
    // $('#unit-1').blur(function(){
    //     var unit1 = $('#unit-1').val();
    //     var unit2 = $('#unit-2').val();
    //     var unit3 = $('#unit-3').val();
    //     var unit4 = $('#unit-4').val();
    //     var count = unit1+unit2+unit3+unit4;
    //     // console.log(unit1);
    //   $("#val").html(count);
    // });

    // $('#unit-1').blur(function(){
    //     var unit1 = $('#unit-1').val();
    //     // console.log(unit1);
    //   $("#val").html(unit1);
    // });
</script>



</html>